<template>
  <!-- 底部控制条 -->
  <div class="PlayController">
    <div class="left" @click="isShow = !isShow">
      <img
        :src="playList[playCurrentIndex].al.picUrl"
        :alt="playList[playCurrentIndex].al.name"
        v-if="playList[playCurrentIndex].al.picUrl"
      />
      <img v-else src="https://p1.ssl.qhimg.com//t013b43196002479b1f.png" />
      <div class="content">
        <div class="title" v-if="playList[playCurrentIndex].al.name">
          {{ playList[playCurrentIndex].name }}
        </div>
        <div class="title" v-else>去听歌吧</div>
        <div class="tips">横滑可以切换上下首哦</div>
      </div>
    </div>
    <div class="right">
      <span class="iconfont icon-bofang" @click="play" v-if="!isPlay"></span>
      <span class="iconfont icon-zanting" @click="pause" v-else></span>
      <span class="iconfont icon-24gl-playlistMusic"></span>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playList[playCurrentIndex].id}.mp3`"
    ></audio>
    <LyricDetail
      :detail="playList[playCurrentIndex]"
      :isPlay="isPlay"
      :play="play"
      :pause="pause"
      v-show="isShow"
      @back="isShow = !isShow"
    ></LyricDetail>
  </div>
</template>
        
<script>
import { mapState, mapMutations } from "vuex";
import LyricDetail from "@/components/LyricDetail.vue";
export default {
  data() {
    return {
      isPlay: false,
      isShow: false,
    };
  },
  setup() {},
  components: {
    LyricDetail,
  },
  computed: {
    ...mapState(["playList", "playCurrentIndex"]),
  },
  updated() {
    // dispatch(函数名，参数) => 触发store下actions定义的函数
    // 每次update都重新请求歌词
    this.$store.dispatch("reqLyric", {
      id: this.playList[this.playCurrentIndex].id,
    });

    // 更新歌词时间
    this.updateTime();
  },
  methods: {
    play() {
      this.updateTime();
      this.$refs.audio.play();
      this.isPlay = true;
    },
    pause() {
      clearInterval(this.$store.state.id);
      this.$refs.audio.pause();
      this.isPlay = false;
    },
    updateTime() {
      this.$store.state.id = setInterval(() => {
        this.$store.commit("setCurrentTime", this.$refs.audio.currentTime);
      }, 1000);
    },
  },
  watch: {
    playCurrentIndex() {
      this.isPlay = false;
    },
  },
};
</script>
        
<style lang="less" scoped>
.PlayController {
  width: 7.5rem;
  height: 1.2rem;
  position: fixed;
  z-index: 2;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #ccc;
  .left {
    display: flex;
    align-items: center;
    padding: 0 0.2rem;
    img {
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 50%;
      margin-right: 0.2rem;
    }
    .content {
      font-size: 0.28rem;
      .title {
        line-height: 0.4rem;
      }
      .tips {
        color: rgb(185, 185, 185);
        font-size: 0.23rem;
      }
    }
  }
  .right {
    .iconfont {
      font-size: 0.5rem;
      margin-right: 0.3rem;
    }
    .icon-bofang {
      font-size: 0.58rem;
    }
  }
}
</style>
        